<template>
  <div id="enterprise">
    <nav>
      <el-input placeholder="输入关键字" style="width:200px;margin-right: 10px" v-model="keyword"></el-input>
      <el-select v-model="type" clearable placeholder="审核状态" style="margin-right: 20px">
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" @click="getContentApply">检索</el-button>
      <!-- <demo v-model="foo"></demo> -->
    </nav>

    <el-table
      class="table-first"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="nickname"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="vip_level"
        label="用户权益">
      </el-table-column>
      <el-table-column
        prop="type_name"
        label="内容类型">
      </el-table-column>
      <el-table-column
        prop="review_name"
        label="审核状态">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="提交时间">
      </el-table-column>
      <el-table-column label="操作" width="360">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="getContentApplyDetail(scope.row.id)">查看详情</el-button>
          <el-button type="primary" size="mini" @click="changeContentApplyStatus(scope.row.id,'')" v-if="scope.row.review_name=='待审核'">通过</el-button>
          <el-button type="danger" size="mini" @click="changeContentApplyStatus(scope.row.id,'refuse')" v-if="scope.row.review_name=='待审核'">拒绝</el-button>
          <el-button type="danger" class="danger-btn" size="mini" @click="delContentApply(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>

    <!--详情弹窗-->
    <el-dialog :title="dialogTit" :visible.sync="addFormVisible" @close="initAddform" width="50%"
               :close-on-click-modal="false">
      <el-form :label-position="'left'" label-width="150px" >
        <el-form-item label="头像" >
          <div v-if="detail.photo_url">
            <img :src="detail.photo_url" alt="" style="width:100px;height: 100px;border-radius:50%;object-fit:cover">
          </div>
        </el-form-item>
        <el-form-item label="名称">
          <div>{{detail.name==null?'无':detail.name}}</div>
        </el-form-item>
        <el-form-item label="简介">
          <div>{{detail.desc==null?'无':detail.desc}}</div>
        </el-form-item>
        <el-form-item label="所属行业" v-if="detail.type_name == '企业'">
          <div>{{detail.industry_name}}</div>
        </el-form-item>
<!--        <el-form-item label="类型" v-if="detail.type_name == '个人'">-->
<!--          <div>{{detail.character_type_name}}</div>-->
<!--        </el-form-item>-->
        <el-form-item label="地址">
          <div>
            {{detail.province==null?'':detail.province[-1]=='市'?detail.province:detail.province+detail.city}}
            {{detail.area==null?'':detail.area}}
            {{detail.address_detail==null?'':detail.address_detail}}
          </div>
        </el-form-item>
        <el-form-item label="联系电话">
          <div>{{detail.contact_number==null?'无':detail.contact_number}}</div>
        </el-form-item>
        <el-form-item label="服务电话">
          <div>{{detail.contact_phone==null?'无':detail.contact_phone}}</div>
        </el-form-item>
<!--        <el-form-item label="公众号">-->
<!--          <div v-if="detail.wechat_img_url">-->
<!--            <img :src="detail.wechat_img_url" alt="" style="width:100px;height: 100px">-->
<!--          </div>-->
<!--        </el-form-item>-->
        <el-form-item label="小程序">
          <div v-if="detail.wxapp_img_url">
            <img :src="detail.wxapp_img_url" alt="" style="width:100px;height: 100px">
          </div>
        </el-form-item>
<!--        <el-form-item label="网站">-->
<!--          <div>{{detail.website}}</div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="排序">-->
<!--          <div></div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="小程序码描述">-->
<!--          <div></div>-->
<!--        </el-form-item>-->
        <el-form-item label="置顶视频/图片">
          <div>
            <img v-if="detail.top_url" :src="detail.top_url" alt="" style="width:100px;height: 100px">
            <video v-if="detail.video_url" :src="detail.video_url" class="avatar" controls="controls"></video>
          </div>
        </el-form-item>
        <el-form-item label="详情">
          <div v-html="detail.content"></div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "examine",
    data(){
      return{
        addFormVisible: false,
        tableData: [],
        keyword: '',
        type: '',
        typeList: [
          {label:'待审核',value: 0},
          {label:'通过',value: 1},
          {label:'拒绝',value: 2}
        ],
        detail: '',
        limit: 10,
        page: 1,
        totalPage: 0
      }
    },
    mounted(){
      this.getContentApply();
    },
    methods:{
      //获取审核内容详情
      async getContentApplyDetail(id){
        const res = await this.$api.getContentApplyDetail({id: id});
        if (res.data.level == 'success'){
          this.detail = res.data.data;
          this.addFormVisible = true;
        }
      },
      //获取审核列表
      async getContentApply(){
        let params = {
          limit: this.limit,
          page: this.page,
          keyword: this.keyword,
          review: this.type
        }
        const res = await this.$api.getContentApply(params);
        if (res.data.level == 'success'){
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
        }
      },
      //改变内容审核的状态
      async changeContentApplyStatus(id,review){
        const res = await this.$api.changeContentApplyStatus({id: id, review: review})
        if (res.data.level == 'success'){
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.getContentApply();
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },
      //删除审核
      async delContentApply(id){
        const res = await this.$api.delContentApply({id: id});
        if (res.data.level == 'success'){
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.getContentApply();
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },
      pageChange(e){
        this.page = e;
        this.getContentApply();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dialog-footer {
    text-align: center;
  }

  nav {
    background: #eee;
    padding: 20px;
    // position: fixed;
    width: 100%;
    z-index: 99;
  }

  // .table-first{
  //     padding-top:100px;
  // }

  //上传图片样式
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    object-fit: contain;
  }
</style>
<style>
  .detailDialog img {
    max-width: 300px;
  }
</style>
